<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar left-icon="left" title="账簿绑卡" @clickLeft="back"/>
		<view class="body">
			<uni-forms ref="baseForm" :model="model" :rules="rules" label-position="top" label-width="150">
				<uni-forms-item label="户号" name="account_no">
					<uni-easyinput v-model="model.account_no" disabled/>
				</uni-forms-item>
				<template v-if="model.account_property == '1'">
					<uni-forms-item label="姓名" name="realname">
						<uni-easyinput v-model="model.realname" disabled/>
					</uni-forms-item>
					<uni-forms-item label="身份证号" name="id_no">
						<uni-easyinput v-model="model.id_no" disabled/>
					</uni-forms-item>
				</template>
				<template v-else>
					<uni-forms-item label="公司名称" name="realname">
						<uni-easyinput v-model="model.realname" disabled/>
					</uni-forms-item>
					<uni-forms-item label="营业执照" name="id_no">
						<uni-easyinput v-model="model.id_no" disabled/>
					</uni-forms-item>
				</template>
				<uni-forms-item label="手机号" name="mobile">
					<uni-easyinput type="number" v-model="model.mobile" disabled/>
				</uni-forms-item>
				<uni-forms-item label="银行卡号" name="primary_account" required>
					<uni-easyinput v-model="model.primary_account" :maxlength="32" placeholder="请输入银行卡号" />
				</uni-forms-item>
				<view v-if="model.account_property == '2'">
					<uni-forms-item label="开户行号" name="bank_no" required>
						<uni-easyinput v-model="model.bank_no" :maxlength="32" placeholder="请输入开户行号" />
					</uni-forms-item>
					<uni-forms-item label="开户行名" name="bank_name" required>
						<uni-easyinput v-model="model.bank_name" :maxlength="60" placeholder="请输入开户行名" />
					</uni-forms-item>
				</view>
				<uni-forms-item label="验证码" name="verify_code" required>
					<send-sms-code 
						trade_type="4"
						:mobile="model.mobile" 
						:card_name="model.realname" 
						:id_no="model.id_no" 
						:card_no="model.primary_account" 
						:account_no="model.account_no" 
						v-model="model.verify_code" 
						@onSend="handleOnSendCode"
					></send-sms-code>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="onSubmit">提交绑卡</button>
		</view>
	</view>
</template>

<script>
	import SendSmsCode from "@/components/formItem/SendSmsCode"
	
	export default {
		
		components : {
			SendSmsCode
		},
		
		data() {
			return {
				model: {},
				rules: {
					primary_account: {
						rules: [
							{ required: true, errorMessage: '请输入正确银行卡号'}
						]
					},
					bank_no: {
						rules: [
							{ required: true, errorMessage: '请输入开户行号'}
						]
					},
					bank_name: {
						rules: [
							{ required: true, errorMessage: '请输入开户行名称'}
						]
					},
					verify_code: {
						rules: [
							{ required: true, errorMessage: '请输入正确验证码'}
						]
					}
				}
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.getBankAccountInfo(uid)
			}
		},
		
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/bankCard/index'
				})
			},
			
			getBankAccountInfo(uid) {
				uni.request({
					url: '/account/getBankAccountInfo',
					data: {
						uid
					},
					success: (res) => {
						if(res.data.success) {
							this.model = {
								account_id: res.data.data.bank_account_id,
								account_no: res.data.data.account_no,
								realname: res.data.data.account_property == '1' ? res.data.data.id_name : res.data.data.account_name,
								id_no: res.data.data.id_no,
								mobile: res.data.data.mobile,
								account_property: res.data.data.account_property,
								...this.model
							}
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					}
				})
			},
			
			handleOnSendCode(data) {
				this.model = {
					 ...this.model,
					 ...data
				}
			},
			
			onSubmit() {
				if(!('trade_no' in this.model) || this.model.trade_no == "" ) {
					uni.showToast({
						icon: 'error',
						title: '请先发送验证码'
					})
					return ;
				}
				
				this.$refs.baseForm.validate().then(res => {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					uni.request({
						url: "/card/addAccountCard",
						data: {
							uid: uni.getStorageSync('uid'),
							...this.model
						},
						method: "POST",
						success: (res) => {
							if(res.data.success) {
								uni.showToast({
									icon: 'success',
									title: '绑定成功'
								})
								setTimeout( () => {
									uni.navigateBack()
								}, 1000)
							} else {
								uni.showToast({
									icon: 'error',
									title: res.data.errMessage
								})
							}
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 750rpx;
		padding: 40rpx 60rpx;
		box-sizing: border-box;
		background: #fff;
	}
	
</style>